<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li><a href="#home">首页</a></li>
    <li><a href="#my">我的音乐</a></li>
    <li><a href="#friend">朋友</a></li>
</ul>
<div id="view">

</div>
<script>
    //通过锚点的切换来更换view中的数据
    //需要监听一个事件
    //当hash值一旦发生改变hashchange将会被触发
    window.addEventListener('hashchange',function () {
        //将切换好hash值所显示的区域
        var view=document.getElementById('view');
        console.log(location.hash);
        //获取到hash值并去除掉#
        var hash=location.hash.slice(1);
        //根据hash值来做到页面内容的切换
        switch(hash){
            case 'my':
                view.innerHTML='我的音乐';
                break;
            case 'friend':
                view.innerHTML='朋友';
                break;
            default:
                view.innerHTML='首页';
        }
    })
</script>
</body>
</html>